<template>
  <div class="circular-chart-container">
    <el-row :gutter="20" align="middle">
      <el-col :span="8">
        <div class="chart-title">{{ chartTitle }}</div>
      </el-col>
      <el-col :span="8">
        <el-select 
          v-model="customerType" 
          size="small" 
          style="width: 100%"
          class="chart-filter"
          @change="handleCustomerTypeChange"
        >
          <el-option :label="firstOptionLabel" :value="firstOptionValue"></el-option>
          <el-option :label="secondOptionLabel" :value="secondOptionValue"></el-option>
        </el-select>
      </el-col>
      
      <el-col :span="8">
        <el-date-picker
          v-model="selectedDate"
          type="month"
          value-format="YYYY-MM"
          format="YYYY-MM"
          placeholder="选择月份"
          :picker-options="pickerOptions"
          :disabled-date="disabledDate"
          style="width: 100%"
          class="chart-filter"
          @change="handleDateChange"
        />
      </el-col>
    </el-row>
    
    <div
      v-show="!showNoData"
      ref="chart"
      class="chart"
      :style="{ height: chartHeight + 'px' }"
    />
    <div
      v-show="showNoData"
      class="no-data"
      :style="{ height: chartHeight + 'px' }"
    >
      暂无数据
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import service from "@/utils/request";
import { ElDatePicker, ElRow, ElCol, ElSelect, ElOption } from "element-plus";

export default {
  name: "CircularChartWithFetch",
  components: {
    ElDatePicker,
    ElRow,
    ElCol,
    ElSelect,
    ElOption
  },
  // 在 props 中添加 colorScheme
  props: {
    // API URL
    apiUrl: {
      type: String,
      required: true,
    },
    // 图表类型（饼图或柱状图）
    chartType: {
      type: String,
      default: "pie",
      validator(value) {
        return ["pie", "bar"].includes(value);
      },
    },
    // 图表标题
    chartTitle: {
      type: String,
      default: "",
    },
    // 图表高度
    chartHeight: {
      type: Number,
      default: 400,
    },
    // 初始化查询参数
    initParams: {
      type: Object,
      default: () => ({}),
    },
    // 颜色方案 ('default' 或 'variant')
    colorScheme: {
      type: String,
      default: "default",
      validator(value) {
        return ["default", "variant"].includes(value);
      },
    },
    // 是否显示客户类型筛选器
    showCustomerTypeFilter: {
      type: Boolean,
      default: false,
    },
    // 客户类型API映射
    customerTypeApiMap: {
      type: Object,
      default: () => ({
        home: '',
        biz: ''
      })
    },
    // 第一个选项的标签
    firstOptionLabel: {
      type: String,
      default: '家客'
    },
    // 第一个选项的值
    firstOptionValue: {
      type: String,
      default: 'home'
    },
    // 第二个选项的标签
    secondOptionLabel: {
      type: String,
      default: '企客'
    },
    // 第二个选项的值
    secondOptionValue: {
      type: String,
      default: 'biz'
    }
  },
  data() {
    return {
      // 图表数据
      chartData: [],
      // 当前查询参数（不再依赖 initParams）
      currentParams: {},
      // 是否显示暂无数据提示
      showNoData: false,
      // 选中的日期（字符串格式 YYYY-MM）
      selectedDate: null,
      // 客户类型 (home: 家客/家宽, biz: 企客/企宽)
      customerType: 'home',
      // 日期选择器配置
      pickerOptions: {
        disabledDate: (time) => {
          const now = new Date();
          const firstDayOfMonth = new Date(
            now.getFullYear(),
            now.getMonth(),
            1
          );
          return time.getTime() >= firstDayOfMonth.getTime();
        },
      },
    };
  },
  computed: {
    // 动态计算实际使用的API URL
    actualApiUrl() {
      // 如果显示客户类型筛选器并且有对应的API映射，则使用映射的API
      if (this.showCustomerTypeFilter && this.customerTypeApiMap[this.customerType]) {
        return this.customerTypeApiMap[this.customerType];
      }
      // 否则使用传入的API URL
      return this.apiUrl;
    }
  },
  watch: {
    // 移除对 initParams 的监听，让每个图表独立管理自己的参数
    // initParams: {
    //   deep: true,
    //   handler(newParams) {
    //     this.currentParams = newParams
    //     this.fetchData()
    //   }
    // }
  },
  mounted() {
    // 总是默认选择上个月，不依赖父组件传入的参数
    const lastMonth = this.getLastMonth();
    // 设置为字符串格式，这样时间选择器能正确显示
    this.selectedDate = this.formatDate(lastMonth);

    // 设置默认查询参数为上个月
    this.currentParams = { ...this.currentParams, time: this.selectedDate };

    this.initChart();
    // 确保在组件挂载后获取数据
    this.$nextTick(() => {
      this.fetchData();
    });
  },
  // 销毁图表实例
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    // 禁用当前月及以后月份
    disabledDate(time) {
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      const currentMonth = currentDate.getMonth(); // 0-11

      const selectedDate = new Date(time);
      const selectedYear = selectedDate.getFullYear();
      const selectedMonth = selectedDate.getMonth(); // 0-11

      return (
        selectedYear > currentYear ||
        (selectedYear === currentYear && selectedMonth >= currentMonth)
      );
    },

    // 获取上个月的日期
    getLastMonth() {
      const now = new Date();
      const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
      return lastMonth;
    },

    // 格式化日期为 YYYY-MM 格式
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      return `${year}-${month}`;
    },

    // 日期变化处理
    handleDateChange(date) {
      if (date) {
        let formattedDate;
        if (typeof date === "string") {
          // 如果是字符串格式 "YYYY-MM"
          formattedDate = date;
        } else {
          // 如果是 Date 对象，格式化为 "yyyy-MM" 格式
          const year = date.getFullYear();
          const month = (date.getMonth() + 1).toString().padStart(2, "0");
          formattedDate = `${year}-${month}`;
        }

        console.log(
          "【CircularChart格式化后的日期】",
          this.chartTitle,
          ":",
          formattedDate
        );

        // 更新参数并重新获取数据
        this.currentParams = { ...this.currentParams, time: formattedDate };
        this.fetchData();
      }
    },

    // 客户类型变化处理
    handleCustomerTypeChange(value) {
      console.log("Customer type changed:", value);
      this.customerType = value;
      // 重新获取数据
      this.fetchData();
    },

    // 获取数据
    async fetchData() {
      // console.log('【CircularChart开始请求数据】API:', this.actualApiUrl, '参数:', this.currentParams)
      try {
        const response = await service.get(this.actualApiUrl, {
          params: this.currentParams,
        });

        // console.log('【CircularChart API响应】:', response)

        // 处理不同的响应数据结构
        const responseData = response.data || response;
        // console.log('【CircularChart标准化后的响应数据】:', responseData)

        // 提取数据
        const amountPercentage = responseData?.amountPercentage || {};
        // console.log('【CircularChart提取的数据】amountPercentage:', amountPercentage)

        // 动态提取所有区县数据，并过滤掉值为0的数据
        const seriesData = Object.keys(amountPercentage)
          .map((county) => ({
            name: county,
            value: amountPercentage[county]?.amount || 0,
            percentage: amountPercentage[county]?.percentage || "0%",
          }))
          .filter((item) => item.value > 0); // 过滤掉值为0的数据项

        // console.log('【CircularChart转换后的图表数据】seriesData:', seriesData)

        // 更新图表数据
        this.chartData = seriesData;

        // 判断是否显示暂无数据
        this.showNoData = seriesData.length === 0;

        this.$nextTick(() => {
          this.updateChart(seriesData);
        });
      } catch (error) {
        // console.error('【CircularChart获取数据失败】:', error)
        // console.error('【CircularChart请求配置】:', error.config)
        // console.error('【CircularChart响应数据】:', error.response)
        this.chartData = [];
        this.showNoData = true;
      }
    },

    // 初始化图表
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }

      this.chart = echarts.init(this.$refs.chart);
    },

    // 更新图表数据
    updateChart(data) {
      // 如果没有数据，不更新图表
      if (data.length === 0 || !this.chart || !this.chart.setOption) {
        return;
      }

       // 定义默认颜色数组（13种不相近的颜色）
      const defaultColors = [
        "#FF6B6B",   // 珊瑚红
        "#45B7D1",   // 天蓝色
        "#FFBE0B",   // 金黄色
        "#4ECDC4",   // 薄荷绿
        "#9B5DE5",   // 紫红色
        "#8AC926",   // 黄绿色
        "#F15BB5",   // 珊瑚粉
        "#00F5D4",   // 青绿色
        "#FF9AA2",   // 浅珊瑚红
        "#B5EAD7",   // 淡薄荷绿
        
        "#00BBF9",   // 亮蓝色
        "#FFCA3A",   // 柠檬黄
        "#6A5ACD",   // 石板蓝
      ];

      // 定义变体颜色数组（13种不相近的颜色）
      const variantColors = [
        "#8ECAE6",   // 柔和的蓝色
        "#F77F00",   // 橙黄色
        "#219EBC",   // 海蓝色
        "#FFB703",   // 鲜明的琥珀色
        "#ffb6c1",   // 浅粉色
        "#dda0dd",   // 梅花色
        "#8fbc8f",   // 淡绿色
        "#90E0EF",   // 淡天蓝
        "#FBCB9C",   // 淡橙色
        "#A8DADC",   // 灰绿蓝
        
        "#C7CEEA",   // 淡紫色
        "#E2F0CB",   // 淡黄绿
        "#D2691E",   // 巧克力色
      ];

      // 根据 colorScheme 选择颜色方案
      const colorPalette = this.colorScheme === "variant" ? variantColors : defaultColors;

      const option = {
        color: colorPalette,
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return (
              `${this.chartTitle}<br/>` +
              `${params.name}: ${params.value}（${params.percent}%）`
            );
          },
        },
        series: [],
      };

      if (this.chartType === "pie") {
        option.series = [
          {
            name: this.chartTitle,
            type: "pie",
            radius: ["25%", "50%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              color: "black",
              formatter: (params) => {
                return `${params.name}\n${params.percent}%`;
              },
              fontSize: 12,
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 20,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            data: data,
          },
        ];
      } else if (this.chartType === "bar") {
        option.xAxis = {
          type: "category",
          data: data.map((item) => item.name),
        };
        option.yAxis = { type: "value" };
        option.series = [
          {
            name: this.chartTitle,
            type: "bar",
            data: data.map((item) => item.value),
          },
        ];
      }

      this.chart.setOption(option, true); // 使用 notMerge=true 重新绘制
    },

    // 刷新数据
    refresh() {
      this.fetchData();
    },
  },
};
</script>

<style scoped>
.circular-chart-container {
  width: 100%;
  position: relative;
}
.chart {
  width: 100%;
  height: 400px;
}
.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 16px;
  color: #909399;
}
.chart-title {
  font-size: 18px;
  font-weight: bold;
  margin-left: 20px;
  line-height: 32px; /* 与选择器高度保持一致 */
}

/* 统一筛选器高度 */
.chart-filter {
  height: 32px;
  line-height: 32px;
}

.chart-filter :deep(.el-input__inner) {
  height: 32px;
  line-height: 32px;
}

.chart-filter :deep(.el-input__icon) {
  line-height: 32px;
}
</style>